css: add documentation for background-blend-mode

After introducing the new CSS property, it is natural to
add some documentation explaining the behavior of it and
our support coverage.

https://bugzilla.gnome.org/show_bug.cgi?id=768305

diff --git a/docs/reference/gtk/css-properties.xml b/docs/reference/gtk/css-properties.xml
index 6416dbad6e9e90901d10a172a075e6229a17e24a..9475fbeb7664a2f8792c08294e6f7a5b1c98167e 100644 (file)
--- a/docs/reference/gtk/css-properties.xml
+++ b/docs/reference/gtk/css-properties.xml
@@ -1109,6 +1109,15 @@ We use <literallayout> for syntax productions, and each line is put in a <code>
                      <ulink url="http://www.w3.org/TR/css3-background/#background-image">CSS3</ulink></entry>
               <entry>not supported: urls without quotes, CSS radial gradients, colors in crossfades</entry>
             </row>
+            <row>
+              <entry>background-blend-mode</entry>
+              <entry><code>〈blend-mode〉 [ , 〈blend-mode〉 ]*</code></entry>
+              <entry><code>normal</code></entry>
+              <entry></entry>
+              <entry></entry>
+              <entry></entry>
+              <entry>only affects multiple backgrounds</entry>
+            </row>
             <row>
               <entry>box‑shadow</entry>
               <entry><code>none | 〈box shadow〉 [ , 〈box shadow〉 ]*</code></entry>
@@ -1144,6 +1153,7 @@ We use <literallayout> for syntax productions, and each line is put in a <code>
 <code>〈bg-image〉 = 〈image〉 | none</code>
 <code>〈bg-layer〉 = 〈bg-image〉 || 〈position〉 [ / 〈bg-size〉 ]? || 〈bg-repeat〉 || 〈box〉 || 〈box〉</code>
 <code>〈final-bg-layer〉 = 〈bg-image〉 || 〈position〉 [ / 〈bg-size〉 ]? || 〈bg-repeat〉 || 〈box〉 || 〈box〉|| 〈color〉</code>
+<code>〈blend-mode〉 = color || color-burn || color-dodge || darken || difference || exclusion || hard-light || hue || lighten || luminosity || multiply || normal || overlay || saturate || screen || soft-light</code>
 <code>〈box shadow〉 = inset? &amp;&amp; 〈length〉{2,4}? &amp;&amp; 〈color〉?</code>
 </literallayout>
 
@@ -1152,6 +1162,10 @@ We use <literallayout> for syntax productions, and each line is put in a <code>
         background images are absent or have transparency.
       </para>
 
+      <para>
+        Alternatively, multiple backgrounds can be blended using the <code>background-blend-mode</code> property.
+      </para>
+
       <table pgwide="1">
         <title>Transition properties</title>
         <tgroup cols="7">